// echarts组件引入
import * as echarts from 'echarts'
// 线性图表，销售趋势图
export function LinearSetOption (Dom, data, day) {
  // console.log(data, day, '线图')
  const Linear = echarts.init(Dom)
  const LinearOp = {
    title: {
      text: '销售额趋势图',
      left: 'center'
    },
    grid: {
      top: '18%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      showContent: true,
      renderMode: 'html',
      formatter: function (params) {
        const msg = `<div style="text-align: left;"><div>销售额: ${params[0].value}</div> ${params[0].name}</div>`
        return msg
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: day,
        axisLine: {
          alignWithLabel: true,
          show: true,
          lineStyle: {
            color: '#969696'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：元',
        position: 'left',
        alignTicks: true,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#969696'
          }
        },
        // 设置网格线颜色
        splitLine: {
          lineStyle: {
            color: '#d9d9d9'
          }
        }
      }
    ],
    series: [
      {
        name: 'Direct',
        stack: 'Total',
        data: data.series,
        type: 'line',
        smooth: true,
        // 设置网格线颜色
        lineStyle: {
          normal: {
            color: 'red' // 折线线条颜色:红色
          }
        },
        itemStyle: {
        // 设置线条上点的颜色（和图例的颜色）
          normal: {
            color: 'red'
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [ // 渐变颜色
              {
                offset: 0,
                color: 'rgba(255, 41, 41, 0.2)'
              },
              {
                offset: 0.6,
                color: '#f8fafd'
              }
            ],
            global: false
          }
        }
      }
    ]
  }
  Linear.setOption(LinearOp)
}

// 柱状图表，销售统计
export function ColumnarOption (Dom, data) {
  console.log(data)
  const Columnar = echarts.init(Dom)
  const ColumnarOp = {
    title: {
      text: '销售额分布',
      left: 'center'
    },
    tooltip: {
      renderMode: 'html',
      formatter: function (params) {
        // console.log(params)
        const msg = `<div style="text-align: left;"><div>销售额: ${params.value}</div> ${params.name}</div>`
        return msg
      }
    },
    grid: {
      top: '18%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: data.xAxis,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：元',
        position: 'left',
        alignTicks: true,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#969696'
          }
        },
        // 设置网格线颜色
        splitLine: {
          lineStyle: {
            color: '#d9d9d9'
          }
        }
      }
    ],
    series: [
      {
        name: '销售额:',
        type: 'bar',
        barWidth: '10%',
        data: data.series,
        itemStyle: {
        // 设置线条上点的颜色（和图例的颜色）
          normal: {
            color: '#91b0ff'
          }
        }
      }
    ]
  }
  Columnar.setOption(ColumnarOp)
}
// 饼图图表，合作商点
export function PieChartOption (Dom, data) {
  // console.log(data)
  const PieChart = echarts.init(Dom)
  const PieOp = {
    tooltip: {
      renderMode: 'html',
      formatter: function (params) {
        const msg = `<div style="text-align: left;"> ${params.name}</div>总占比: ${params.percent}%</div>`
        return msg
      }
    },
    color: ['#85a7ff', '#a8ffcf', '#ffc298', '#d9ffff', '#d1e0fd'],
    series: [
      {
        type: 'pie',
        radius: [25, 110],
        center: ['50%', '50%'],
        roseType: 'angle',
        itemStyle: {
        },
        data,
        label: {
          formatter: function (data) {
            return `${data.name} ${data.value} 
  (${data.percent.toFixed(1)}%)`
          }
        }
      }
    ]
  }
  PieChart.setOption(PieOp)
}
